<template>
<h1>月销售统计</h1>
  <div id="monthChart" style="width: 900px;height: 400px"></div>
  <div>
    <el-select v-model="saleYear">
      <el-option
          v-for="item in selectOptionsAll"
          :key="item"
          :label="item"
          :value="item"></el-option>
    </el-select>
    <el-button type="primary" @click="find">查询</el-button>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts'

export default {
  mounted() {
    axios.post("/api/saleInfo/findAllYears",null).then(response=>{
      this.selectOptionsAll = response.data;
      this.saleYear = this.selectOptionsAll[0];
      this.find();
    });

  },
  name: "MonthlyStats",
  data(){
    return{
      saleYear:'',
      selectOptionsAll:[],
      monthList:[],
      computerPriceList:[],
      securityPriceList:[],
      workPriceList:[]
    }
  },
  methods:{
    find(){
      let param = new URLSearchParams();
      param.append("saleYear",this.saleYear);
      axios.post("/api/saleInfo/findByMonth",param).then(response=>{
         let data = response.data;
         this.monthList = data.monthList;
         this.computerPriceList = data.computerList;
         this.securityPriceList = data.securityList;
         this.workPriceList = data.workList;
         this.getChart();
      })
    },
    getChart(){
      let myChart = echarts.init(document.getElementById("monthChart"));
      let app = {};
      let option;
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['电脑产品', '安防产品', '办公耗材']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.monthList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '电脑产品',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.computerPriceList
          },
          {
            name: '安防产品',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.securityPriceList
          },
          {
            name: '办公耗材',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.workPriceList
          }
        ]
      };

      option && myChart.setOption(option);


    }
  }


}
</script>

<style scoped>

</style>